@import '../../style/commen.less';

.@{cbox-prefix} {
    display: flex;
    width: 200px;

    .check input {
        display: none;
    }

    .check {
        display: block;
        position: relative;
        cursor: pointer;
        font-size: 20px;
        user-select: none;
        -webkit-tap-highlight-color: transparent;

        /* Create a custom checkbox */
        .checkmark {
            position: relative;
            top: 0;
            left: 0;
            height: 1.3em;
            width: 1.3em;
            background-color: #2196F300;
            border-radius: 0.25em;
            transition: all 0.25s;
        }

        .lock {
            position: absolute;
            bottom: 0.15em;
            right: 0.1em;
            height: 0.75em;
            width: 0.75em;
        }
    }

    .content {
        font-size: 20px;
        margin-left: 0.25em;
    }

    /* When the checkbox is checked, add a blue background */
    .check input:checked~.checkmark {
        background-color: #2196F3;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        transform: rotate(0deg);
        border: 0.1em solid black;
        left: 0;
        top: 0;
        width: 1.05em;
        height: 1.05em;
        border-radius: 0.25em;
        transition: all 0.25s, border-width 0.1s;
    }

    /* Show the checkmark when checked */
    .check input:checked~.checkmark:after {
        left: 0.45em;
        top: 0.25em;
        width: 0.25em;
        height: 0.5em;
        border-color: #fff0 white white #fff0;
        border-width: 0 0.15em 0.15em 0;
        border-radius: 0em;
        transform: rotate(45deg);
    }

    &:hover {
        transform: scale(1.05);
    }
}